| vue | 您所在的位置：网站首页 › vuecliserver build没反应 › vue |
vue
|
package.json文件 "scripts": { "serve": "vue-cli-service serve --mode development", "build:intranet": "vue-cli-service build --mode intranet", "build:test": "vue-cli-service build --mode test", "build:pre": "vue-cli-service build --mode pre", "build": "vue-cli-service build --mode production" },mode 和 环境文件的关系 .env # 在所有的环境中被载入 .env.[mode] # 只在指定的模式中被载入 如上我们在package.json定义的build模式，对应一下的环境文件：
环境文件目录
.env.development VUE_APP_CURRENTMODE = 'development' # base host VUE_APP_BASE_HOST = '' # 文件路径 VUE_APP_FILE_PATH = ''.env.production VUE_APP_CURRENTMODE = 'production' # base host VUE_APP_BASE_HOST = '//www.example.com' # 文件路径 VUE_APP_FILE_PATH = '/secondPath/'.env.test VUE_APP_CURRENTMODE = 'test' # base host VUE_APP_BASE_HOST = '//test.example.com:6060' # 文件路径 VUE_APP_FILE_PATH = '/secondPath/'当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。 如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。 自测发现： 如果配置mode 比如（vue-cli-service build --mode hello），且没有 .env.hello文件，也没有配置NODE_ENV属性 结果： 打印的值是 NODE_ENV: 'development' 还是配置 --mode hello，如果有.env.hello文件，且文件为空 结果： 打印的仍然是 NODE_ENV: 'development' 还是配置 --mode hello，如果有.env.hello文件，且文件中配置 NODE_ENV = 'hello123' 结果： 打印的仍然是 NODE_ENV: 'hello123' 如果是 test（有 .env.test文件） 结果： 打印的值是 NODE_ENV: 'test'，且有自己配置的 VUE_APP开头的属性值 如果是 pre（没有 .env.pre文件） 结果： 打印的值是 NODE_ENV: 'development'最终结论： NODE_ENV属性值 一般只有 production/test/development 三种值（没有在.env.[mode]文件中配置该值的前提下） production对应production、test对应test、其他默认都是development 如果在 .env.[mode] 文件中设置了 NODE_ENV值，则覆盖以下三者的关系、优先级 package.json 中scripts中定义的 --mode 根目录下对应的文件名， 例如 .env.development、.env.test、.env.production 环境文件中定义的环境变量 NODE_ENV的取值，如果在环境文件中定义了，则去该值，否则即取 production/test/development 三值之一请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。 vue.config.js中的使用 const IS_RELEASE = process.env.VUE_APP_CURRENTMODE === 'production'; const IS_DEV = process.env.VUE_APP_CURRENTMODE === 'development'; // cdn路径 const cdnPath = `${process.env.VUE_APP_BASE_HOST}${process.env.VUE_APP_FILE_PATH}`; console.log('process.env', process.env); module.exports = { publicPath: IS_DEV ? '' : cdnPath, lintOnSave: false, assetsDir: 'assets', // 正式环境关掉 sourceMap css: { sourceMap: !IS_RELEASE, }, productionSourceMap: !IS_RELEASE, // ... }VUE Cli 模式和环境变量： https://cli.vuejs.org/zh/guide/mode-and-env.html#模式 |
【本文地址】
公司简介
联系我们